<script setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue'
import JPEG1 from '@/assets/imgs/1.jpeg'
import JPEG2 from '@/assets/imgs/2.jpg'
import JPEG3 from '@/assets/imgs/3.jpg'
import JPEG4 from '@/assets/imgs/4.jpg'

const currentIndex = ref(0);
const timer = ref(null);

const getImageUrl = (name) => {
  return new URL(`/src/assets/imgs/${name}`, import.meta.url).href
}

const images = reactive([
  {src:getImageUrl('1.jpeg'), alt: 'Image 1'},
  {src:getImageUrl('2.jpg'), alt: 'Image 2'},
  {src:getImageUrl('3.jpg'), alt: 'Image 3'},
  {src:getImageUrl('4.jpg'), alt: 'Image 4'},
])

// 播放某一个幻灯片的方法
function play(index) {
  // 判断 index 是否超出范围
  if (index < 0) {
    index = images.length - 1
  } else if (index >= images.length) {
    index = 0
  }
  currentIndex.value = index;
}

// 自动播放
const autoPlay = () => {
  timer.value = setInterval(() => {
    play(currentIndex.value + 1)
  }, 3000)
}

// 切换到上一张
const prev = () => {
  clearInterval(timer.value);
  play(currentIndex.value - 1)
  autoPlay();
}

// 切换到下一张
const next = () => {
  clearInterval(timer.value);
  play(currentIndex.value + 1)
  autoPlay();
}

// 点击指示器切换图片
const goToSlide = (index) => {
  clearInterval(timer.value);
  play(index);
  autoPlay();
}

onMounted(() => {
  autoPlay();
})

onUnmounted(() => {
  clearInterval(timer.value);
})

</script>

<template>
  <div class="carousel-container">
    <!-- 图片容器 -->
    <div class="carousel-track">
      <template  v-for="(img,index) in images">
        <img
            :class="{
            'active': currentIndex === index,
            'prev': currentIndex - 1 === index || (currentIndex === 0 && index === images.length - 1),
            'next': currentIndex + 1 === index || (currentIndex === images.length - 1 && index === 0)
          }"
            :src="img.src"
            :alt="img.alt"
        />
      </template>
    </div>
    <!-- 控制按钮 -->
    <div class="nav">
      <button class="prev-btn" @click="prev()">&lt;</button>
      <button class="next-btn" @click="next()">&gt;</button>
    </div>
    <!-- 指示器 -->
    <div class="indicators">
      <span
          v-for="(img, index) in images"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<style scoped>
.carousel-container {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-track img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-track img.active {
  opacity: 1;
  z-index: 1;
}

.carousel-track img.prev,
.carousel-track img.next {
  opacity: 0;
  z-index: 0;
}

.nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 2;
}

.nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

.nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.indicators span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.indicators span.active {
  background-color: white;
}
</style>